<template>
	<!-- Slider main container -->
	<div class="swiper" ref="swiper">
		<!-- Additional required wrapper -->
		<div class="swiper-wrapper">
			<!-- Slides -->
			<div
				class="swiper-slide"
				v-for="bannerList in banners"
				:key="bannerList.id">
				<img :src="bannerList.imgUrl" alt="" />
			</div>
		</div>
		<!-- If we need pagination -->
		<div class="swiper-pagination"></div>

		<!-- If we need navigation buttons -->
		<div class="swiper-button-prev"></div>
		<div class="swiper-button-next"></div>

		<!-- If we need scrollbar -->
		<div class="swiper-scrollbar"></div>
	</div>
</template>

<script>
import Swiper, { Navigation, Pagination, Autoplay } from 'swiper'
import 'swiper/css'
import 'swiper/css/navigation'
import 'swiper/css/pagination'
export default {
	name: 'JCarousel',
	props: {
		banners: Array,
	},

	// mounted(){
	// 	this.$nextTick(() => {
	// 			new Swiper('.swiper', {
	// 				// 加载的组件
	// 				modules: [Navigation, Pagination, Autoplay],
	// 				// 无缝轮播
	// 				loop: true,
	// 				// 小圆点
	// 				pagination: {
	// 					clickable: true,
	// 					el: '.swiper-pagination',
	// 				},
	// 				// // 左右翻页
	// 				navigation: {
	// 					nextEl: '.swiper-button-next',
	// 					prevEl: '.swiper-button-prev',
	// 				},
	// 				// 自动轮播
	// 				autoplay: {
	// 					delay: 1000, // 轮播间隔时间
	// 					pauseOnMouseEnter: true, // 鼠标移入暂停轮播
	// 					disableOnInteraction: false, // 移出继续轮播
	// 				},
	// 			})
	// 		})
	// },

	watch: {
		banners: {
			handler(newVal) {
				if (!newVal.length) return
				this.$nextTick(() => {
					new Swiper(this.$refs.swiper, {
						// 加载的组件
						modules: [Navigation, Pagination, Autoplay],
						// 无缝轮播
						loop: true,
						// 小圆点
						pagination: {
							clickable: true,
							el: '.swiper-pagination',
						},
						// // 左右翻页
						navigation: {
							nextEl: '.swiper-button-next',
							prevEl: '.swiper-button-prev',
						},
						// 自动轮播
						autoplay: {
							delay: 1000, // 轮播间隔时间
							pauseOnMouseEnter: true, // 鼠标移入暂停轮播
							disableOnInteraction: false, // 移出继续轮播
						},
					})
				})
			},
			immediate: true,
			/*  自己写法*/
			// deep: true,

			// 当父组件把banners数据传过来：当已有数据发生改变触发该函数

			/*
				更新数据是同步的，渲染页面是异步的
				使用$nextTick 当页面渲染完成 执行后面回调函数
			 */
		},
	},
}
</script>

<style scoped></style>
